<template>
<div class="box">
    <div class="person">
        <van-image text-align="center" round width="5rem" height="5rem" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
    </div>
    <p>{{username}}</p>
    <p class='p2'>个人主页 ></p>
    <ul>
        <li>
            <p><van-icon name="like-o" size="30" color="#E54847" /></p>
            <p>我喜欢的</p> 
        </li>
        <li>
            <p><van-icon name="coupon-o" size="30" color="#E54847"/></p> 
            <p>优惠券</p>
        </li>
         <li>
            <p><van-icon name="bill-o" size="30" color="#E54847" /></p>
            <p>我的钱包</p>
        </li>
          <li>
            <p><van-icon name="gem-o" size="30" color="#E54847" /></p>
            <p>会员中心</p>
        </li>
        <li>
            <p><van-icon name="service-o" size="30" color="#E54847" /></p>
            <p>在线客服</p> 
        </li>
        <li>
            <p><van-icon name="setting-o" size="30" color="#E54847" /></p>
            <p>设置</p> 
        </li>
    </ul>
    <div class="exit" @click='toExit'>退出登录</div>
</div>
</template>

<script>
import cookie from 'js-cookie'
let id = cookie.get().useInfo;
export default {
    name:"Personal",
    data(){
        return{
            username:id
        }
    },
    methods:{
        toExit(){
            // console.log(111);
            cookie.remove('useInfo')
            this.$router.go(0)
            // this.$router.push('/mine/login')
            // this.$router.push('/movie/nowplaying')
        }
    }
}
</script>

<style scoped>
.box{
    width: 100%;
    height: 100%;
}
.person{
    text-align: center;
    padding-top: 50px;
}  
p{
    text-align: center;
    font-weight: normal;
    font-size: 20px;
    margin-top: 10px;
}
.p2{
    color: gray;
    font-size: 16px;
}
.pic{
    text-align: center;
}
.person h5{
    line-height: 80px;
}
ul{
    display: flex;
    flex-wrap: wrap;
    margin-top:50px;
    width: 100%;
    height: 200px;
    /* padding-bottom: 100px; */
}
ul li{
    width: 33.3%;
    margin-top: 10px;
}
ul li p:nth-child(2) {
    font-size: 14px;
    line-height: 20px;
    color: rgb(100, 40, 40);
}
.exit{
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    background: #E54847;
    border-radius: 25px;
    margin: 30px auto;
}
</style>